<template>
    <div class="com-container" style="fontSize:12px">
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>
export default {
    props: ["commonData", "time1", "time2",],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null
        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {

                    this.allData = newVal

                    this.getData();

                }
            },
            immediate: true
        },
        time1: function () {
            this.getData();
        },
        time2: function () {
            this.getData();
        },
    },

    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 100);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);

            var option = {

                backgroundColor: '#fff',
                color: ['#FF0000', '#FF0000', '#0F870F', '#0000FF'],


                tooltip: {
                    trigger: 'axis'
                },
                title: [{
                    // text: '配方：SMA13 总重：5076kg 时间：2022-12-01 00:20:46',
                    right: '5%',
                    bottom: '14%',
                    textStyle: {
                        color: '#333',
                        fontSize: 12,
                        fontWeight: 400
                    }

                },
                {
                    text: '',
                    right: '5%',
                    bottom: '14%',
                    textStyle: {
                        color: 'red',
                        fontSize: 12,
                        fontWeight: 400
                    }

                }],
                legend: {
                    data: ['上限', '下限', '中值', '目标', '当前值'],

                    textStyle: {
                        // color: '33FFFF',
                        fontSize: 14
                    },
                    itemWidth: 15,
                    itemHeight: 15,
                    itemGap: 35
                },
                grid: {
                    left: '1%',
                    right: '5%',
                    top: '16%',
                    bottom: '6%',
                    containLabel: true
                },
                toolbox: {
                    "show": false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    "axisLine": {
                        lineStyle: {
                            color: '#CCCCCC'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#D5D5D5'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#DBDBDB',
                            type: 'solid',
                            width: '0.5'
                        }
                    },

                    data: ['0.075', '0.15', '0.3', '0.6', '1.18', '2.36', '4.75', '9.5', '13.2', '16', '19', '26.5', '31.5', '37.5']
                },
                yAxis: {
                    "axisLine": {
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    name: "通过率",
                    min: 0,
                    max: 100,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#DBDBDB',
                            type: 'solid',
                            width: '0.5'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },

                    axisLabel: {
                        textStyle: {
                            color: '#333'
                        },
                        formatter: '{value}%',
                    },
                    type: 'value'
                },
                series: [
                    {
                        name: '上限',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#FF0000',
                                width: 0.5,
                                type: 'dotted'

                            }
                        },

                        // data: [18, 18, 22, 25, 25, 30, 40, 77, 100, 100, 100, 100, 100, 100]
                    }, {
                        name: '下限',

                        type: 'line',
                        symbolSize: 6,
                        lineStyle: {

                            normal: {
                                color: '#FF0000',
                                width: 0.5,
                                type: 'dotted'

                            }
                        },
                        // data: [0, 5, 0, 3, 5, 10, 15, 45, 75, 100, 100, 100, 100, 100]
                    },
                    {
                        name: '中值',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#46868E',
                                width: 0.5,
                                type: 'dotted'

                            }


                        },
                        // data: [9.9, 11.3, 12.3, 13.4, 15.6, 19.9, 26.8, 57.7, 90.8, 100, 100, 100, 100, 100]
                    },
                    {
                        name: '目标',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#0F870F',
                                width: 0.5,
                                type: 'dotted'

                            }


                        },
                        // data: [9.9, 11.3, 12.3, 13.4, 15.6, 19.9, 26.8, 57.7, 90.8, 100, 100, 100, 100, 100]
                    }, {
                        name: '当前值',
                        // smooth: true,
                        type: 'line',
                        symbolSize: 6,
                        symbol: 'circle',

                        itemStyle: {
                            normal: {

                                color: '#0000FF',
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#0000FF',

                                    }
                                }
                            }
                        },
                        lineStyle: {

                            normal: {

                                width: 0.8,


                            }
                        },
                        // data: [8.6, 10.6, 12.7, 13.8, 16.4, 21.2, 27.8, 59.4, 91.2, 100, 100, 100, 100, 100]
                    }]
            };
            this.chartInstance.setOption(option);
        },
        getData(allData) {
            console.log(allData);
            // 级配上限
            if (this.allData.length > 0) {
                console.log(this.allData);

                let arr1 = []
                let num1 = []
                this.allData[0].forEach(item1 => arr1.unshift(item1))
                arr1.map(item => {
                    num1.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num1.push(item)
                    // } else {
                    //     num1.push('0')
                    // }
                })
                // 级配下限
                let arr2 = []
                let num2 = []
                this.allData[1].forEach(item1 => arr2.unshift(item1))
                arr2.map(item => {
                    num2.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num2.push(item)
                    // } else {
                    //     num2.push('0')
                    // }
                })

                // 级配中限
                let arr3 = []
                let num3 = []
                this.allData[2].forEach(item1 => arr3.unshift(item1))
                arr3.map(item => {
                    num3.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num3.push(item)
                    // } else {
                    //     num3.push('0')
                    // }
                })
                // 目标级配
                let arr4 = []
                let num4 = []
                this.allData[3].forEach(item1 => arr4.unshift(item1))
                arr4.map(item => {
                    num4.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num4.push(item)
                    // } else {
                    //     num4.push('0')
                    // }
                })
                // 实际级配
                let arr5 = []
                let num5 = []
                this.allData[4].forEach(item1 => arr5.unshift(item1))
                arr5.map(item => {
                    num5.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num5.push(item)
                    // } else {
                    //     num5.push('0')
                    // }
                })



                var that = this

                setTimeout(() => {
                    that.updateChart(num1, num2, num3, num4, num5);
                    // that.updateChart();

                }, 800)
            } else {
                that.updateChart([], [], [], [], []);
            }
        },
        updateChart(num1, num2, num3, num4, num5) {

            // var data = this.allData

            // var updateData = null
            // if (data.length > 0 && data != undefined) {
            //     updateData = [data[0].F_WaterActualValue, data[0].F_Cement1ActualValue, data[0].F_Cement2ActualValue, data[0].F_Aggregate1ActualValue, data[0].F_Aggregate2ActualValue, data[0].F_Aggregate3ActualValue, data[0].F_Aggregate4ActualValue, data[0].F_Aggregate5ActualValue, data[0].F_OreActualValue, data[0].F_FlyashActualValue, data[0].F_Admixture1ActualValue, data[0].F_Admixture2ActualValue]
            // } else {
            //     updateData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            // }

            // const value = updateData;
            var dataOption = {
                title: {


                    // text: this.time1.substr(0, 10) + "至" + this.time2.substr(0, 10) + "混凝土产量统计",
                },
                xAxis: {

                    // data: ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60', 'other'],//数据
                    // data: data.StrengthGrade
                },
                series: [

                    {


                        data: num1
                    }, {

                        data: num2
                    },

                    {
                        data: num3
                    },
                    {

                        data: num4
                    }, {

                        data: num5
                    },
                ]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100);
            console.log(titleFontSize);

            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: [{


                    bottom: '14%',
                    textStyle: {
                        color: '#333',
                        fontSize: titleFontSize * 1.8,
                        fontWeight: 400
                    }

                },
                {
                    text: '',

                    bottom: '14%',
                    textStyle: {
                        color: 'red',
                        fontSize: titleFontSize * 1.8,

                    }

                }],

                legend: {
                    textStyle: {
                        fontSize: titleFontSize * 2
                    },
                    itemWidth: titleFontSize * 1.5,
                    itemHeight: titleFontSize * 1.5,
                    itemGap: titleFontSize * 3
                },
                xAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 2
                        }
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 2
                        }
                    },

                }],
                // series: [{
                //     barWidth: titleFontSize * 1.717, //柱子宽
                // }, {
                //     barWidth: titleFontSize * 1.717, //柱子宽度
                // }]

            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope></style>
